<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/photo.css}">
   
    <!-- 引入 layui.css -->
   <script src="/static/js/scriptindex.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/lib/layui/layui.js"></script>
   <script src="/static/js/bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	  	 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  
</script>

   <!-- 头部的模板 -->
<div th:replace="fragment/head::head"></div> 

    
    <div class="container mt-4">
    
      <div class="row">
        <div class="col-12">
        
           <div class="card text-center"> 
               <div class="card-body ">
                 <div class="layui-anim layui-anim-down card-title"><h3>Smile-相册</h3></div>
               </div>
           </div>
         
          </div>
      </div>
    
       <div class="row" style="margin-top: 20px">
       
         <div style="margin-top:10px" th:each="phototype:${phototypes}"  class="col-6 col-sm-6 col-md-4">
         
         
             <div th:onclick="passwordverify([[${phototype.id}]],[[${phototype.flag}]],[[${phototype.password}]]);" >
			          <div class="layui-anim layui-anim-up">
			             <img id="typeimg"  class=" img-thumbnail" th:src="${phototype.imgurl}">
			             <p style="margin-top:3px">&nbsp;&nbsp; <strong th:text="${phototype.name}"></strong> </p>
			             <p style="color:darkgray">&nbsp;&nbsp;&nbsp;<span th:text="${phototype.sum.size()}"> </span>张</p>
			          </div>
             </div>
          
         </div>
   
          
        
   
   
   <!-- 对应row -->      
   </div>
       
       
       
    </div>
    
    
    </body>
    
    <script type="text/javascript">
     
     function passwordverify(id,flag,password){
       
       if(flag == 0 ){
       
          var userinput = prompt("请输入密码");
          if(userinput == password){  
              $.post("/phototype/passwordverify",
                    {"id":id,"password":userinput},
                    function(data){
				                    if(data["result"]){
				                         window.location.href="/photos/expert?id="+id+"&password="+password;
				                    }else {
				                        alert("远程验证错误！");
				                    }
                    
                    },"json");
          }else if( userinput != null){
           alert("密码错误！");
          }
       }else if(flag == 1){
       
           window.location.href="/photos?id="+id;
       
       }
     
      
     }
    
    </script>
    </html>
    